<style>
    .col-md-4{
        padding: 0 5px;
    }
    .row{
        margin: 0;
    }
</style>
<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${ctxPath}/sensitiveWord/list" method="post">
        <div class="bjui-searchBar">
            <label>&nbsp;请输入关键字查询:</label>
            <input type="text" value="${pojo.wordContent!}" name="wordContent" style="width: 100px;">
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a>&nbsp;
            <button type="button" class="btn btn-green" onclick="addRow();">新增敏感词</button>
            <div class="pull-right">
                <div class="btn-group">
                    <button type="button" class="btn-default dropdown-toggle" data-toggle="dropdown" data-icon="copy">复选框-批量操作<span class="caret"></span></button>
                    <ul class="dropdown-menu right" role="menu">
                        <li><a href="${ctxPath}/sensitiveWord/delete" data-toggle="doajaxchecked" data-confirm-msg="确定要删除选中项吗？" data-idname="deleteIds" data-group="deleteIds">删除<font COLOR="red">选中</font>行</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="bjui-pageContent row">
    <div class="col-md-6" style="height:100%;">
        <fieldset style="height:100%;overflow:auto;">
            <table class="table table-striped">
                <caption>敏感词列表</caption>
                <thead>
                <tr>
                    <th align="center">编号</th>
                    <th align="center">敏感词</th>
                    <th align="center" width="26" ><input type="checkbox" class="checkboxCtrl" data-group="deleteIds" data-toggle="icheck"></th>
                    <th align="center">操作</th>
                </tr>
                </thead>
                <tbody>
                    @for(uw in useWord){
                        <tr data-id="${uwLP.index}">
                            <td align="center">${uw.wordId!,xss}</td>
                            <td align="center">${uw.wordContent!,xss}</td>
                            <td align="center"><input type="checkbox" name="deleteIds" data-toggle="icheck" value="${uw.wordId!}"></td>
                            <td align="center">
                                <a href="${ctxPath}/sensitiveWord/delete?deleteIds=${uw.wordId!}" class="btn btn-red" data-toggle="doajax" data-confirm-msg="确定要删除该行信息吗？">删除</a>
                            </td>
                        </tr>
                    @}
                </tbody>
            </table>
        </fieldset>
    </div>

    <div class="col-md-6"  style="height: 100%;">
        <fieldset style="height:100%; overflow:auto;">
            <form id="dataForm" action="${ctxPath}/sensitiveWord/save" method="post" data-toggle="validate" data-autorefresh="true" data-alertmsg="false" data>
                <table class="table table-striped" id="userDefinedTable">
                    <caption style="height: 30px;position: relative;">新增敏感词 <button type="submit"  class="btn btn-blue pull-right" style="top: 1px;position: absolute;right: 0;">保存</button></caption>
                    <thead>
                    <tr>
                        <th align="center">敏感词</th>
                        <th align="center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </form>
        </fieldset>
    </div>
</div>

<script>
    /**
     * 添加一行
     */
    function addRow() {
        var rows = $("#userDefinedTable tbody:first").children("tr").length + 1;
        var html = "";
        html += "<tr id=" + rows + ">" +
            "<td class='tdPadding' align='center'><input type='text' class='form-control'  name='wordContent' style='width: 200px;'  maxlength='10' placeholder='请输入敏感词' data-rule='required;'/></td>" +
            "<td align='center'><a href='javascript:delRow(" + rows + ")'  class='btn btn-red'>删除</a></td>" +
            "</tr>";
        $("#userDefinedTable tbody:first").append(html);
    }

    /**
     * 删除一行
     */
    function delRow(row){
        var row = $("#"+row);
        row.remove();
    }
</script>